<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
    <head>
        <title>Job</title>
        <style type="text/css">
            .data {}
        </style>

        <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(document).ready(function() {
                //TODO: $("#drawing").load("bismillah.svg");//Addin/abdul mutalib bin md jaafar.svg
                var file = "Christian/nathan kesagar.svg";
                //var file = "Addin/talib bin yoep.svg";
                $("#drawing").attr("src",file);

                $.ajax({
                    type: "GET",
                    url: file,
                    dataType: "xml",
                    success: function(xml) {
                        var rdf = $(xml).find("svg>metadata>rdf\\:RDF");
                        var work = rdf.find("cc\\:Work");

                        var date = work.find("dc\\:date").text();
                        //var title = work.find("dc\\:title").text();
                        var desc = work.find("dc\\:description").text();

                        var publisher = work.find("dc\\:publisher");
                        var agent = publisher.find("cc\\:Agent");
                        var customer = agent.find("dc\\:title").text();
                        //var title = $(xml).find("svg>path").attr("d");
                        //var title = $(xml).find("svg>metadata>rdf\\:RDF>cc\\:Work").attr("rdf\\:about");

                        //either one case - write html output
                        /*var content = "";
                        content += "Sold to: "+customer+"<br/>";
                        content += "Since: "+date+"<br/>";
                        content += "Description: "+desc+"<br/>";
                        $("#data").html(content);*/

                        //compose text only let body construct html layout
                        $("#customer").text(customer);
                        $("#date").text(date);
                        $("#desc").text(desc);

                        var meta = $(xml).find("svg>metadata");
                        var metaData = meta.text();                  
                        var svg = $(xml).find("svg");
                        var height = svg.attr("height");
                        var string = svg.text();
                        string = string.replace(metaData,"");
                        //remove white space
                        //see http://bugs.jquery.com/ticket/4848
                        string = string.replace(/\s+|\s+$/g, "");
                        $("#word").text(string.length);

                        if(height == "" || height == "0" || height == "100%")
                            $("#drawing").attr("height",500);
                        else
                            $("#drawing").attr("height",height);
                    }
                });
            });
            
        </script>

    </head>
    <body>        
        <div id="data">
            Sold to: <span id="customer"></span><br/>
            Order at: <span id="date"></span><br/>
            Description: <span id="desc"></span><br/>
            Word count: <span id="word"></span><br/>
        </div>
        <hr/>
        <p></p>
        <!-- @TODO: <div id="drawing"></div>--><!-- @see http://keith-wood.name/svg.html -->
        <iframe id="drawing" height="1800" width="100%"></iframe>
    </body>
</html>